<template>
  <div class="min-h-screen bg-gray-50 flex">
    <!-- 左侧导航栏 -->
    <div :class="[
      'fixed left-0 top-0 h-full bg-white shadow-sm transition-all duration-300 z-10',
      isCollapsed ? 'w-16' : 'w-64'
    ]">
      <!-- 顶部标题和折叠按钮 -->
      <div class="h-16 px-4 border-b border-gray-100 flex items-center justify-between">
        <h1 :class="[
          'font-bold text-gray-800 transition-all duration-300 whitespace-nowrap overflow-hidden',
          isCollapsed ? 'text-lg' : 'text-xl'
        ]">
          {{ isCollapsed ? '4GL' : '辅助工具' }}
        </h1>
        <button 
          @click="toggleCollapse"
          class="p-2 rounded-lg hover:bg-gray-100 text-gray-500 flex-shrink-0"
        >
          <i :class="[
            'ri-arrow-left-s-line text-lg transition-transform duration-300',
            isCollapsed ? 'rotate-180' : ''
          ]" />
        </button>
      </div>

      <!-- 导航菜单 -->
      <nav class="mt-2 overflow-y-auto h-[calc(100vh-4rem)]">
        <router-link
          v-for="tab in tabs"
          :key="tab.value"
          :to="tab.route"
          :class="[
            'w-full flex items-center py-3 text-sm font-medium transition-colors duration-200',
            isCollapsed ? 'px-4 justify-center' : 'px-6',
            $route.path === tab.route
              ? 'bg-blue-50 text-blue-600 border-r-4 border-blue-500'
              : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
          ]"
          :title="isCollapsed ? tab.label : ''"
        >
          <component 
            :is="tab.icon" 
            class="h-5 w-5 flex-shrink-0"
            :class="[
              $route.path === tab.route ? 'text-blue-500' : 'text-gray-400',
              !isCollapsed && 'mr-3'
            ]"
          />
          <span v-if="!isCollapsed" class="whitespace-nowrap">{{ tab.label }}</span>
        </router-link>
      </nav>
    </div>

    <!-- 主内容区 -->
    <div :class="[
      'flex-1 transition-all duration-300',
      isCollapsed ? 'ml-16' : 'ml-64'
    ]">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Terminal, 
  Code, 
  Home,
  Phone
} from 'lucide-vue-next'

const isCollapsed = ref(false)

const tabs = [
  { label: '首页', value: 'home', icon: Home, route: '/' },
  { label: 'T100相关', value: 't100', icon: Terminal, route: '/t100' },
  { label: 'GP相关', value: 'gp', icon: Code, route: '/gp' },
  { label: 'JSON转Record', value: 'json-to-record', icon: Phone, route: '/json-to-record' },
  { label: '4gl错误信息', value: 'error-messages', icon: Code, route: '/error-messages' },
  
]

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}
</script>
